Responsive Design
- Heinz Rybak
-
- Offline
- Neues Mitglied
-
8 Jahre 8 Monate her - 8 Jahre 8 Monate her #2368
von Heinz Rybak
Heinz Rybak antwortete auf Responsive Design
Ich nehme den Beitrag von Matthias zum Anlass, endlich einige Details dazu zu beschreiben, wie wir responsives Verhalten realisiert haben. Danach folgen einige generelle Anmerkungen zum Thema Responsive Design.
Der Beitrag wird also etwas länger
.
Zunächst muss sichergestellt werden, dass die Webseite auf einem Smartphone richtig angezeigt wird. Dazu wurde in der index.php folgende rote Zeile eingefügt:
<!DOCTYPE html>
<!--suppress XmlUnboundNsPrefix -->
<html xmlns=" www.w3.org/1999/xhtml " xml:lang="language; ?>" lang="language; ?>" dir="direction; ?>">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Unser Ziel war ferner, dass das Menü auf dem Smartphone an- und abgeschaltet werden kann, dass bei Auswahl eines Menüpunktes ohne Unterpunkte das Menü automatisch ausgeblendet wird und bei Menüpunkten mit Untermenü das Menü stehen bleibt. Dazu musste die effects.js ergänzt werden:
// trigger responsive menu and menu symbol
$('.custom_tsg_rmenu').on('click',
function(){$('.module-outer_menu').show();
});
$('.custom_tsg_rmenu').on('click',
function(){$('.custom_tsg_rmenu_off').show();
});
$('.custom_tsg_rmenu').on('click',
function(){$('.custom_tsg_rmenu').hide();
});
$('.module-outer_menu').has('li.current.active.deeper.parent').css('display','block');
$('.module-outer_menu').filter(':visible').each(
function(){$('.custom_tsg_rmenu').hide();
});
$('.module-outer_menu').filter(':visible').each(
function(){$('.custom_tsg_rmenu_off').show();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.module-outer_menu').hide();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.custom_tsg_rmenu_off').hide();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.custom_tsg_rmenu').show();
});
Voraussetzung dafür sind die beiden Module“ RMenu“ und „Rmenu_off“ mit den class-suffixes „_tsg_rmenu“ bzw. „_tsg_rmenu_off“ („tsg“ steht hier für „Tanzsportgemeinschaft“), die wie folgt definiert sind:
<p style="text-align: center;"><span class="icon-menu-3"> </span></p>
bzw.
<p style="text-align: center;"><span class="icon-delete"> </span></p>
Weitere Voraussetzung sind folgende css-Statements in der custom.css:
@media only screen and (min-width: 768px) {
.custom_tsg_rmenu, .custom_tsg_rmenu_off {display: none !important;}
} }
@media only screen and (max-width: 767px) {
.custom_tsg_rmenu_off, .module-outer_menu {display: none;
} }
Dadurch wird sichergestellt, dass das An- und Abschalten des Hauptmenüs nur unterhalb von 768px möglich ist (jeder andere Wert ist natürlich auch machbar - siehe meine Anmerkung zu den Breakpoints weiter unten) und das Hauptmenü auf einem Smartphone bzw. unterhalb 768px zunächst nicht sichtbar ist.
Soweit zu den wichtigen Voraussetzungen. Sicher kann hier einiges eleganter realisiert werden. Aber ich habe mich erst ab Ende 2014 mit Webdesign beschäftigt. Davor konnte ich Begriffe wie CSS, HTML, Joomla buchstabieren - aber das war es dann.
Alle anderen Anpassungen (z.B. Positionierung von Spalten und Menüs) sind aus meiner Sicht webseitenspezifisch und müssen individuell gestaltet werden. Oder anders ausgedrückt: Responsive Design ist im Wesentlichen eine gestalterische Aufgabe und lässt sich durch Techniken nicht vollständig realisieren.
Erfoderlich sind natürlich entsprechende Grundfunktionen seitens Joomla und hilfreich sind Features wie z.B. das An- und Abschalten bzw. Ein- und Ausblenden von Menüs auf dem Smartphone. Aber bereits hier gibt es mehrere Möglichkeiten:
Auch das Thema Spalten ist webseitenabhängig. Wir wollten z.B. auf die rechte Spalte generell verzichten.
Ebenso ist das Thema Breakpoints nicht generell lösbar. Anzahl und Werte von Breakpoints, an denen sich das Webseiten-Layout ändern soll/muss, sind abhängig von verschiedenen webseitenspezifischen Parametern und gehen letztlich über die von verschiedenen Seiten empfohlenen Werte hinaus.
Auch sind diese allgemein empfohlenen Werte sehr unterschiedlich. So empfiehlt Rocket Theme Breakpoints mit 1200, 960, 768 und 480 px. Bei Mediaevent sind es 1280, 980 und 760. Und bei JEvents liegt der wichtigste Breakpoint bei 515px.
Begründet sind diese Werte u.a. durch die Breite der Viewports (Monitore, Tabletts, Smartphones, . . .), wobei die entsprechenden Werte von den verschiedenen Autoren sehr unterschiedlich angesetzt werden.
D.h. jeder muss letztlich selbst entscheiden, wo er für seine Web-Seite die Breakpoints setzt. Templates müssen also entsprechende Modifikationen/Ergänzungen zulassen.
Dann noch zu Tabellen. Vielfach werden Tabellen - sehr oft zu recht - als veraltete Methode der Webseitengestaltung angesehen. In bestimmten Fällen habe sie aber doch Vorteile, da entsprechendes Layout nur sehr aufwendig auf anderen Wegen realisiert werden kann.
Nebeneffekt ist, dass Tabellen individuell responsiv gestaltet werden müssen. Wichtig ist dafür zunächst, dass Tabellen ein Klassensuffix erhalten. Dieser kann dann genutzt werden, um über CSS die Tabellen klassenabhängig an den gewünschten Breakpoints anzupassen. Persönlich halte ich von den angebotenen Joomla-Extensions nicht besonders viel.
Das, was ich hier sehr allgemein und verkürzt beschrieben habe , basiert auch auf Erfahrungen mit der Gestaltung einer weiteren Webseite ( www.ig-lilienthal.de ), die ich auf Basis eines „responsiven“ Templates von Rocket Theme gestaltetet habe.
Letztlich war der einzige Vorteil, dass ein an- und abschaltbares Menü für Smartphones vorhanden ist.
Alle anderen Gestaltungsaufgaben mussten ebenso individuell angepasst werden - insbesondere die vielen Tabellen (s.o.) und vor allem die Integration der verschiedenen Extensions wie z.B. JEvents oder Phoca Gallery.
Fazit für mich: ja - responsives Design ist erforderlich - aber die Erwartungen an entsprechende Templates sollten nicht zu hoch sein, da die indiviuellen Anforderungen nie vollständig erfüllt werden können - es sei denn, dass sich mann/frau den Möglichkeiten eines Templates klaglos unterwirft. Aber weshalb soll es bei Joomla und seinen Templates anders sein als in der Welt von SAP oder ORACLE?
Was denkt Ihr dazu?
Der Beitrag wird also etwas länger
.Zunächst muss sichergestellt werden, dass die Webseite auf einem Smartphone richtig angezeigt wird. Dazu wurde in der index.php folgende rote Zeile eingefügt:
<!DOCTYPE html>
<!--suppress XmlUnboundNsPrefix -->
<html xmlns=" www.w3.org/1999/xhtml " xml:lang="language; ?>" lang="language; ?>" dir="direction; ?>">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Unser Ziel war ferner, dass das Menü auf dem Smartphone an- und abgeschaltet werden kann, dass bei Auswahl eines Menüpunktes ohne Unterpunkte das Menü automatisch ausgeblendet wird und bei Menüpunkten mit Untermenü das Menü stehen bleibt. Dazu musste die effects.js ergänzt werden:
// trigger responsive menu and menu symbol
$('.custom_tsg_rmenu').on('click',
function(){$('.module-outer_menu').show();
});
$('.custom_tsg_rmenu').on('click',
function(){$('.custom_tsg_rmenu_off').show();
});
$('.custom_tsg_rmenu').on('click',
function(){$('.custom_tsg_rmenu').hide();
});
$('.module-outer_menu').has('li.current.active.deeper.parent').css('display','block');
$('.module-outer_menu').filter(':visible').each(
function(){$('.custom_tsg_rmenu').hide();
});
$('.module-outer_menu').filter(':visible').each(
function(){$('.custom_tsg_rmenu_off').show();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.module-outer_menu').hide();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.custom_tsg_rmenu_off').hide();
});
$('.custom_tsg_rmenu_off').on('click',
function(){$('.custom_tsg_rmenu').show();
});
Voraussetzung dafür sind die beiden Module“ RMenu“ und „Rmenu_off“ mit den class-suffixes „_tsg_rmenu“ bzw. „_tsg_rmenu_off“ („tsg“ steht hier für „Tanzsportgemeinschaft“), die wie folgt definiert sind:
<p style="text-align: center;"><span class="icon-menu-3"> </span></p>
bzw.
<p style="text-align: center;"><span class="icon-delete"> </span></p>
Weitere Voraussetzung sind folgende css-Statements in der custom.css:
@media only screen and (min-width: 768px) {
.custom_tsg_rmenu, .custom_tsg_rmenu_off {display: none !important;}
} }
@media only screen and (max-width: 767px) {
.custom_tsg_rmenu_off, .module-outer_menu {display: none;
} }
Dadurch wird sichergestellt, dass das An- und Abschalten des Hauptmenüs nur unterhalb von 768px möglich ist (jeder andere Wert ist natürlich auch machbar - siehe meine Anmerkung zu den Breakpoints weiter unten) und das Hauptmenü auf einem Smartphone bzw. unterhalb 768px zunächst nicht sichtbar ist.
Soweit zu den wichtigen Voraussetzungen. Sicher kann hier einiges eleganter realisiert werden. Aber ich habe mich erst ab Ende 2014 mit Webdesign beschäftigt. Davor konnte ich Begriffe wie CSS, HTML, Joomla buchstabieren - aber das war es dann.
Alle anderen Anpassungen (z.B. Positionierung von Spalten und Menüs) sind aus meiner Sicht webseitenspezifisch und müssen individuell gestaltet werden. Oder anders ausgedrückt: Responsive Design ist im Wesentlichen eine gestalterische Aufgabe und lässt sich durch Techniken nicht vollständig realisieren.
Erfoderlich sind natürlich entsprechende Grundfunktionen seitens Joomla und hilfreich sind Features wie z.B. das An- und Abschalten bzw. Ein- und Ausblenden von Menüs auf dem Smartphone. Aber bereits hier gibt es mehrere Möglichkeiten:
- entweder ich schiebe das Menü nach oben(so wie es Matthias getan hat),
- oder ich blende es von links ein
- oder ich blende es über (wie auf unserer Seite).
Auch das Thema Spalten ist webseitenabhängig. Wir wollten z.B. auf die rechte Spalte generell verzichten.
Ebenso ist das Thema Breakpoints nicht generell lösbar. Anzahl und Werte von Breakpoints, an denen sich das Webseiten-Layout ändern soll/muss, sind abhängig von verschiedenen webseitenspezifischen Parametern und gehen letztlich über die von verschiedenen Seiten empfohlenen Werte hinaus.
Auch sind diese allgemein empfohlenen Werte sehr unterschiedlich. So empfiehlt Rocket Theme Breakpoints mit 1200, 960, 768 und 480 px. Bei Mediaevent sind es 1280, 980 und 760. Und bei JEvents liegt der wichtigste Breakpoint bei 515px.
Begründet sind diese Werte u.a. durch die Breite der Viewports (Monitore, Tabletts, Smartphones, . . .), wobei die entsprechenden Werte von den verschiedenen Autoren sehr unterschiedlich angesetzt werden.
D.h. jeder muss letztlich selbst entscheiden, wo er für seine Web-Seite die Breakpoints setzt. Templates müssen also entsprechende Modifikationen/Ergänzungen zulassen.
Dann noch zu Tabellen. Vielfach werden Tabellen - sehr oft zu recht - als veraltete Methode der Webseitengestaltung angesehen. In bestimmten Fällen habe sie aber doch Vorteile, da entsprechendes Layout nur sehr aufwendig auf anderen Wegen realisiert werden kann.
Nebeneffekt ist, dass Tabellen individuell responsiv gestaltet werden müssen. Wichtig ist dafür zunächst, dass Tabellen ein Klassensuffix erhalten. Dieser kann dann genutzt werden, um über CSS die Tabellen klassenabhängig an den gewünschten Breakpoints anzupassen. Persönlich halte ich von den angebotenen Joomla-Extensions nicht besonders viel.
Das, was ich hier sehr allgemein und verkürzt beschrieben habe , basiert auch auf Erfahrungen mit der Gestaltung einer weiteren Webseite ( www.ig-lilienthal.de ), die ich auf Basis eines „responsiven“ Templates von Rocket Theme gestaltetet habe.
Letztlich war der einzige Vorteil, dass ein an- und abschaltbares Menü für Smartphones vorhanden ist.
Alle anderen Gestaltungsaufgaben mussten ebenso individuell angepasst werden - insbesondere die vielen Tabellen (s.o.) und vor allem die Integration der verschiedenen Extensions wie z.B. JEvents oder Phoca Gallery.
Fazit für mich: ja - responsives Design ist erforderlich - aber die Erwartungen an entsprechende Templates sollten nicht zu hoch sein, da die indiviuellen Anforderungen nie vollständig erfüllt werden können - es sei denn, dass sich mann/frau den Möglichkeiten eines Templates klaglos unterwirft. Aber weshalb soll es bei Joomla und seinen Templates anders sein als in der Welt von SAP oder ORACLE?
Was denkt Ihr dazu?
Letzte Änderung: 8 Jahre 8 Monate her von Heinz Rybak.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2375
von Matthias
Matthias antwortete auf Responsive Design
So, der Pull Request ist eingereicht.
Ich habe noch etwas das Design überarbeitet und ein einklappbares Menü ergänzt. Des Weiteren kann die Breite, ab der die mobile Ansicht greift, im Backend verändert werden, wodurch sich die neuen Funktionen abschalten lassen.
@Heinz Rybak:
Natürlich ist es am Besten, wenn das Template speziell für die Seite entwickelt/angepasst wurde.
Allerdings bauen sich die wenigsten ein eigenes Template. Die meisten greifen auf schon fertige Templates zurück, die mangels Bedarf, Zeit oder Kenntnissen meist nicht groß verändert werden.
Und was die Anforderungen angeht, so können diese leicht erfüllt werden, wenn man geringe Anforderungen stellt und einfach nur eine funktionierende Homepage haben will.
Ich habe noch etwas das Design überarbeitet und ein einklappbares Menü ergänzt. Des Weiteren kann die Breite, ab der die mobile Ansicht greift, im Backend verändert werden, wodurch sich die neuen Funktionen abschalten lassen.
@Heinz Rybak:
Natürlich ist es am Besten, wenn das Template speziell für die Seite entwickelt/angepasst wurde.
Allerdings bauen sich die wenigsten ein eigenes Template. Die meisten greifen auf schon fertige Templates zurück, die mangels Bedarf, Zeit oder Kenntnissen meist nicht groß verändert werden.
Und was die Anforderungen angeht, so können diese leicht erfüllt werden, wenn man geringe Anforderungen stellt und einfach nur eine funktionierende Homepage haben will
. Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Thomas Hunziker
-
- Offline
- Administrator
-
8 Jahre 8 Monate her #2376
von Thomas Hunziker
Thomas Hunziker antwortete auf Responsive Design
Danke schonmal für den PR.
Ich hab ihn mal grob überflogen aber brauche sicher mehr Zeit
Ich hab ihn mal grob überflogen aber brauche sicher mehr Zeit
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Heinz Rybak
-
- Offline
- Neues Mitglied
-
- Thomas Hunziker
-
- Offline
- Administrator
-
Ladezeit der Seite: 0.120 Sekunden